<template>
	<div class="block">
    <el-carousel height="632px">
      <el-carousel-item v-for="(item,index) in ban" :key="index">
        <h3><img :src="item.thumb" alt="banner"></h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
//  import Swiper from 'swiper';
import $ from 'jquery'
import axios from 'axios'
export default {
  name: 'Header',
  data:function(){
    return{
      ban:[
      // {url:require('../assets/banner1.png')},
			// {url:require('../assets/banner2.jpg')},
			// {url:require('../assets/banner1.png')},
			// {url:require('../assets/banner2.jpg')}
      ]
    }
  },
  created:function(){  
	$(function(){
		$(".ban").find("div:not(:eq(0))").hide(); //不是第一图片的隐藏
		var max=$(".ban div").length;//图片个数
		var index=0;
		//根据图片循环显示页码(列表项个数)
		for(var i=1;i<=max; i++){
			$(".dian").append("<li></li>");//根据图片个数 追加li列表项个数
		}
		$(".dian li:first").addClass("current");//第一个默认样式
		//对应列表项（鼠标经过）的切换
		$(".dian li").hover(function(){
			$(this).addClass("current").siblings().removeClass("current");
			var a =$(this).index();//获取当前元素
			$(".ban div").eq(a).show().siblings().hide();
		})
		//自动播放
		function autos(){
			setInterval(function(){
				if(index+1==max){
					index=0;
				}else{
					index=index+1;
				}
				$(".dian li").eq(index).mouseover();
			},2000);
		}
    autos();
	})
	},
	mounted:function(){
		axios
		.get('/index/banner')
    .then(res=>{
			this.ban=res.data.data
      })
    .catch(error=>{console.log(error)})
	}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#banner{width:100%;position:relative;}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    margin: 0;
		line-height: 632px;
  }

  /* .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  } */
img{width:100%;}


.ban{width:100%;}
.ban img{width:100%;height:550px;display:block;}
.dian{position:absolute;bottom:5%;width:132px;z-index:99;left:50%;margin-left:-66px;display:flex;align-content: center;}
.dian li{width:16px;height:16px;border-radius:11px;background-color:#fff;margin:0 auto;}
.dian li.current{background-color:#A40000;}
</style>
